
import EditMaterial from "../../../";
import React from "react";
import ColorInput from "components/ColorInput";
import { MeshPhongMaterial, Color } from "three";

export default function ColorItem() {

    const controller = EditMaterial.useController();

    const material = controller.useMemo(s => s.material as MeshPhongMaterial, []);

    const onChange = React.useCallback((e: number) => {
        if (!material) return;

        material.color = new Color(e);
        controller.onChange(material);
    }, [controller, material])

    if (!material) return <></>

    return (
        <ColorInput onChange={onChange} value={material.color.getHex()} />
    )
}